<template>
<div>
<div class='music-card playing'>
  
  <div class='image'></div>
  
  <div class='wave'></div>
  <div class='wave'></div>
  <div class='wave'></div>
  <div class='info2'>
  <div class="info2_topo_k">
    <div class="info2_topo"></div>
    <div class="info2_topo2"></div>
    <div class="info2_er">
    <div class="info2_er_le"><van-icon name="phone-o" />:</div>
    <div class="info2_er_re">{{tel}}</div>
    </div>
    <div class="info2_er">
    <div class="info2_er_le"><van-icon name="envelop-o" />:</div>
    <div class="info2_er_re">{{qqcom}}</div>
    </div>
    <div class="info2_er">
    <div class="info2_er_le">🐧:</div>
    <div class="info2_er_re">{{qq}}</div>
    </div>
    
    

  </div>
  </div>
  <div class='info'
    v-clipboard:copy="tel"
        v-clipboard:success="firstCopySuccess"
        v-clipboard:error="firstCopyError"
  >
    <h2 class='title'>Little Black</h2>
    <div class='artist'>Contact me</div>
  </div>
  
  <i class="fa fa-pause trigger" aria-hidden="true"></i>
  <i class="fa fa-play trigger" aria-hidden="true"></i>
</div>


</div>
</template>
<script>
import { Notify } from 'vant';
export default {

    data() {
      return {
     show:false,
     tel:'15639509681',
     qqcom:'2498686798@qq.com',
     qq:'2498686798'
   


      };
    },
   
    created() {
      
    },
    mounted() {


    },
    

    methods:{
  goto(){{
    this.show=false
    this.$emit('xqnum', 2)
  }},
  firstCopySuccess(e) {

 Notify({
  message: '复制微信成功',
  color: '#fff',
  background: '#383737',
});
      
    },
    firstCopyError(e) {
       Notify({
  message: '复制微信失败',
  color: '#fff',
  background: '#6f42c1',
});
  
    } 
    },
}
</script>





<style scoped lang="scss">
// @import 'https://fonts.googleapis.com/css?family=Reem+Kufi';

body {
  background: #fff;
}


@keyframes wave {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.music-card {
  margin: 50px auto;
  background: #fff;
  box-shadow: 0px 8px 28px -9px rgba(0,0,0,0.45);
  overflow: hidden;
  position: relative;
  width: 90%;
  height: 80vh;
  border-radius: 6px;
}

.image {
  // background: url('../assets/img/zp2.jpg') no-repeat 100%;
  background-size: cover;  
  position: absolute;
  z-index: 1;
  opacity: 0.3;
  // height: 300px;
  // width: 300px;
}

.image:after {
  height: 100px;
  content: '';
  top: 200px;
  position: absolute;
  width: 100%;
  z-index: 1;
  background: linear-gradient(rgba(9, 2, 4, 0), #444);
}

.wave {
  position: absolute;
  height: 750px;
  width: 750px;
  opacity: 0.6;
  left: 0;
  top: 0;
  margin-left: -70%;
  margin-top: -130%;
  background: radial-gradient(#353535, #383737);
}

.wave:nth-child(2),
.wave:nth-child(3) {
  top: 10px;
}

.playing .wave {
  border-radius: 40%;
  animation: wave 3000ms infinite linear;
}
/* when stop */
.wave {
  border-radius: 40%;
  animation: wave 55s infinite linear;
}

.playing .wave:nth-child(2) {
  animation-duration: 4000ms;
}
/* when stop */
.wave:nth-child(2) {
  animation-duration: 50s;
}

.playing .wave:nth-child(3) {
  animation-duration: 5000ms;
}
/* when stop */
.wave:nth-child(3) {
  animation-duration: 45s;
}

.info {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  text-align: center;
  // background: #000;
}

.info2{
  position: absolute;
  top: 400px;
  left: 0;
  right: 0;
  text-align: center;
  // background: #000;
}

.title {
  font-size: 1.4em;
  font-weight: 400;
  color: #333;
  margin-bottom: 8px;
  text-transform: uppercase;
  font-family: 'Reem Kufi', sans-serif;
}

.artist {
  color: #cfcfcf;
  font-size: 1.2em;
  letter-spacing: 0.08em;
  font-family: 'Reem Kufi', sans-serif;
  margin-top: -10px;
}

.fa {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 18px;
  cursor: pointer;
  color: #555;
}

.fa-play {
  display: none;
}
.info2_topo_k{
  width: 90%;
  margin: auto;
}
.info2_topo{
width: 60px;
height: 5px;
border-radius:20px ;
background: #999;
}
.info2_topo2{
width: 40px;
height: 5px;
border-radius:20px ;
background: #eee;
margin-top: 5px;
margin-bottom: 5px;
}
.info2_er{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  line-height: 40px;

  border-bottom:1px solid #eee ;
}
.info2_er_le{
  color: #999;
}
</style>
